<template>
  <uni-popup
    ref="popup"
    type="center"
    background-color="rgba(0,0,0,0)"
    mask-background-color="rgba(0,0,0,0.6)">
    <view class="ad-popup">
      <swiper
        class="ad-wrap"
        circular
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500">
        <swiper-item v-for="(item, index) in prop.list" :key="index">
          <image class="swiper-item" :src="item.advPicture" @tap.stop="tapAdv(item)"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="close-wrap">
      <view class="bnt-close" @tap="close">
        <text class="iconfont icon-close"></text>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { handleAd } from '@/utils/util';

interface Props {
  list: any;
}
const prop = withDefaults(defineProps<Props>(), {
  list: [] as any,
});

const tapAdv = (row: any) => {
  handleAd(row);
};

const popup = ref();
const open = () => {
  popup?.value?.open();
};
const close = () => {
  popup?.value?.close();
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.ad-popup {
  width: 342px;
  height: 400px;
  background-color: #fff;
  border-radius: 12px;

  .ad-wrap {
    height: 100%;
    width: 100%;

    .swiper-item {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }
}

.close-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 46px;
  .bnt-close {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #d5d5d5;
    border-radius: 50%;

    .icon-close {
      color: #d5d5d5;
      font-size: 16px;
    }
  }
}
</style>